오늘은 짧지만 강렬한(?) 모듈을 소개하고 갈까 합니다. spinner는 너무나 많이 쓰이고 있습니다.

이런 spinner 가 초기에 많이 쓰였다고 한다면

안드로이드, iOS, web 가릴 것 없이 빙글빙글 돌아가는 spinner는 사용자에게 기다리는 동안의 안정감을 선사하죠.

tawian/text-spinners
_text-spinners - Pure text, CSS only, font independent, inline loading indicators_github.com

지금 소개하는 spinner는 text spinner 입니다. 아주 간단한 codepen 부터 보고 가시죠?

사실.. 이 코드펜만 보면 더 설명할 것도 없습니다.

그저 가져다쓰기만 하면 프로젝트를 아주 훌륭하게 만들어주는 좋은 도구입니다.

어디에서 영감을 얻었을까?

하지만 프로젝트를 잘 보면 cli-spinner에 영감을 받았다고 합니다.

sindresorhus/cli-spinners
_cli-spinners - Spinners for use in the terminal_github.com

cli-spinner는 Node 기반의 커맨드라인에서 돌아가는 spinner 입니다.

아래를 클릭하시면 돌아가는 모습을 볼 수 있습니다.

Cli-spinner 소스 설명

소스는 의외로 간단합니다.

와 같이 interval time을 정해 두고 frame 별로 돌아가는 문자를 지정하면 애니메이션이 나타나는 방법을 취하고 있구요

setInterval(() =\> {  
const frames = spinner.frames;  
logUpdate(frames\[i = ++i % frames.length\] + ' Unicorns');  
}, spinner.interval);

와 같이 setInterval을 호출하고 있습니다.

text-spinner 소스 분석

.loading::after {   
content: "\\A.\\A..\\A...";   
animation: spin4 2s steps(4) infinite;  
}

cli-spinner가 javascript의 setInterval을 이용했다고 하면 text-spinner는 animation기능을 이용해서 같은 내용을 구현했네요.

정말 깜놀한 아이디어네요~

By Keen Dev on October 5, 2016.

Exported from Medium on May 31, 2017.